import { Dropdown, Button, type MenuProps } from "antd";
import { FC } from "react";
import { DownOutlined } from "@ant-design/icons";
import useWorkflowStore from "../../../stores/workflowStore";
import { nanoid } from "nanoid";

const getNodeDataByType = (type: string) => {
  switch (type) {
    case "llm":
      return {
        label: "大模型对话",
        model: { name: "gpt-3.5-turbo" },
      };
    case "ifelse":
      return {
        label: "If/Else",
        logicList: ["If", "Else"],
      };
    default:
      return {};
  }
};

const AddNodeDialog: FC = () => {
  const { addNode, nodes, edges } = useWorkflowStore();
  const onClickMenuItem: MenuProps["onClick"] = ({ key }) => {
    const id: string = nanoid();
    addNode({
      id: id,
      position: { x: 1000, y: 0 },
      data: { label: id, ...getNodeDataByType(key) },
      type: key,
    });
  };

  const dropList: MenuProps["items"] = [
    {
      key: "start",
      label: <div>开始</div>,
    },
    {
      key: "llm",
      label: <div>大模型对话</div>,
    },
    {
      key: "ifelse",
      label: <div>If/Els</div>,
    },
  ];

  const showNode = () => {
    console.log("nodes", nodes);
    console.log("edge", edges);
  };

  return (
    <div className="absolute top-4 left-4 z-50">
      <Dropdown menu={{ items: dropList, onClick: onClickMenuItem }}>
        <Button type="text">
          添加一个新节点 <DownOutlined />
        </Button>
      </Dropdown>
      <Button type="primary" onClick={showNode}>
        查看工作流数据
      </Button>
    </div>
  );
};

export default AddNodeDialog;
